<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="message">
<!--    一般使用v-model来实现双向绑定   v-model其实实现了两个操作   v-bind绑定一个value属性，v-on给当前元素绑定input事件 -->
<!--    <input type="text" :value="message" @input="valueChange">-->
<!--    <input type="text" :value="message" @input="message = $event.target.value">-->
<!--    第9行代码     等同于第11行     等同于12行-->
    <h2>{{message}}</h2>
  </div>


  <script src="../js/vue.js"></script>
  <script>
      const app = new Vue({
          el:'#app',
          data:{
              message:'你好呀'
          },
          methods:{
              // valueChange(event){
              //     this.message = event.target.value
              // },
          },
      })
  </script>
</body>
</html>